<template>
  <view class="personal-list enterprise-list-view">
    <!--  搜索框  -->
    <fixed-search
      :search-name="searchParams.realName"
      ipt-placeholder="请输入搜索内容"
      @arrow-click="arrowClick"
      @handle-search-icon-click="handleSearch"
    />
    <view class="search-total">
      为你查询到<text class="total">{{ total }}</text
      >条信息
    </view>
    <view class="container">
      <view class="filter-honour">
        <view class="filter-honour-level" @tap="handleHonourLevelFilterClick">
          <view class="text">
            最高学历: {{ searchParams.educationList?.[0] || "不限" }}
          </view>
          <view class="icon">
            <u-icon name="arrow-down-fill" />
          </view>
        </view>
        <view class="filter-honour-year" @tap="handleHonourYearFilterClick">
          <view class="text">
            职称层级: {{ searchParams.jobTitleList?.[0] || "不限" }}
          </view>
          <view class="icon">
            <u-icon name="arrow-down-fill" />
          </view>
        </view>
      </view>

      <none-data v-if="personalList.length === 0" />

      <view
        v-else
        class="card-container"
        v-for="item in personalList"
        :key="item.id"
      >
        <text style="color: salmon; font-size: 20rpx"> </text>
        <personal-card :information="item">
          <template #btn>
            <view class="btn-box">
              <button class="btn" @tap="personalDetails(item)">个人空间</button>
              <!-- <button class="btn">加为好友</button> -->
            </view>
          </template>
        </personal-card>
      </view>
    </view>

    <u-popup
      class="my-popur"
      :show="popupShowFlag"
      :round="33"
      @close="popupShowFlag = false"
      @open="popupOpen"
    >
      <view class="title"> 选择{{ curPopupTitle }} </view>
      <up-list height="400rpx">
        <up-list-item v-for="(item, index) in honourLevelData" :key="index">
          <u-cell
            :title="item.filedName"
            :border="false"
            @tap="() => handlePopupCellClick(item)"
          >
            <template #value>
              <u-icon v-if="item.checked" name="checkbox-mark" />
            </template>
          </u-cell>
        </up-list-item>
      </up-list>
      <up-button
        text="取消"
        shape="circle"
        color="linear-gradient(to right, #FF934C, #FC686F )"
        @click="popupShowFlag = false"
      />
    </u-popup>
  </view>
</template>
<script setup>
import { ref } from "vue";
import FixedSearch from "@/package_honour/pages/honour/components/fixed-search.vue";
import personalCard from "@/package_honour/pages/honour/components/personal-card.vue";
import { customNav } from "@/utils/customNav";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { getUserInfoPageListApi } from "@/api/honour/personal-list";
import {
  generateRandomNumId,
  getUrlParamsInH5,
  getUrlParamsInWeixin,
} from "@/utils/utils";
import {
  getConfigEnterpriseFieldsApi,
  getHonourYearsListApi,
  getTopSearchApi,
} from "@/api/honour/search";
let searchParams = ref({
  realName: "",
  educationList: [],
  jobTitleList: [],
  page: 1,
  size: 10,
});
const total = ref(0);
const personalList = ref([]);
const curPopupTitle = ref("");
const popupShowFlag = ref(false);
const cellList = ref([]);
const honourLevelData = ref([]);
const honourArea = ref([]);
const arrowClick = () => {
  customNav("index");
};
const handleHonourLevelFilterClick = () => {
  popupShowFlag.value = true;
  curPopupTitle.value = "学历";
};
const handleHonourYearFilterClick = () => {
  popupShowFlag.value = true;
  curPopupTitle.value = "职称";
};
const handleSearch = (searchIptVal) => {
  searchParams.value.page = 1;
  searchParams.value.realName = searchIptVal;
  getUserInfoPageListData();
};
const getUserInfoPageListData = async () => {
  console.log("ssssss", searchParams.value);
  let res = await getUserInfoPageListApi(searchParams.value);
  const { code, data } = res;
  if (code == 200) {
    personalList.value = data.records;
    total.value = data.total;
  }
};
const getUserInfoPageListDataLoad = async () => {
  let res = await getUserInfoPageListApi(searchParams.value);
  const { code, data } = res;
  if (code == 200) {
    personalList.value = personalList.value.concat(data.records);
  }
};
const personalDetails = (data) => {
  console.log(data);
  customNav(
    `/package_honour/pages/honour/enterprise-honor-personal?id=${data.id}`
  );
};
/**
 * 获取企业高级筛选内容
 * @returns {Promise<void>}
 */
const getConfigEnterpriseFields = async () => {
  const params = {
    type: 2,
  };
  const res = await getConfigEnterpriseFieldsApi(params);
  const { code, data } = res;
  if (code === 200) {
    console.log("getConfigEnterpriseFieldsApi", data);
    cellList.value = data.map((item) => {
      console.log(item);
      item.children.unshift({
        id: "不限",
        filedName: "不限",
      });
      return item;
    });
  }
};

/**
 * 处理搜索数据
 * @param searchIptVal
 */
const handleSearchData = (data) => {
  console.log("cellList.value", cellList.value);
  // 学历分类
  const honourLevel = cellList.value.find(
    (cell) => cell.filedName === "学历分类"
  ).children;
  // 职称层级
  const honourArea = cellList.value.find(
    (cell) => cell.filedName === "职称层级"
  ).children;
  if (data == "学历") {
    honourLevelData.value = honourLevel;
  } else {
    honourLevelData.value = honourArea;
  }
};
const handlePopupCellClick = (data) => {
  if (curPopupTitle.value == "学历") {
    if (data.filedName !== "不限") {
      searchParams.value.educationList = [data.filedName];
    } else {
      searchParams.value.educationList = [];
    }
  } else {
    if (data.filedName !== "不限") {
      searchParams.value.jobTitleList = [data.filedName];
    } else {
      searchParams.value.jobTitleList = [];
    }
  }
  searchParams.value.page = 1;
  getUserInfoPageListData();
  popupShowFlag.value = false;
};
const popupOpen = () => {
  if (curPopupTitle.value == "学历") {
    handleSearchData("学历");
  } else {
    handleSearchData("职称");
  }
};
onLoad((option) => {
  console.log("option", JSON.parse(option.searchParams));
  let data = JSON.parse(option.searchParams);
  searchParams.value.realName = data.realName;
  searchParams.value.educationList = data.educationList;
  searchParams.value.jobTitleList = data.jobTitleList;
  getUserInfoPageListData();
  getConfigEnterpriseFields();
});
onReachBottom(() => {
  if (personalList.value.length !== total.value) {
    searchParams.value.page++;
    getUserInfoPageListDataLoad();
  } else {
  }
});
</script>
<style lang="less">
@import url(./style/list.less);
.personal-list {
  .search-total {
    padding-left: 34rpx;
    margin-top: 30rpx;
    font-family: "ali-p";
    font-size: 20rpx;
    color: @color-black-text;
    .total {
      color: @color-blue-text;
      margin-left: 5rpx;
      margin-right: 5rpx;
    }
  }
  .list {
    .temp-img {
      width: 100vw;
      height: 90vh;
      object-fit: contain;
    }
  }

  .btn-box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    .btn {
      width: 150rpx;
      font-family: "ali";
      font-weight: 400;
      font-size: 23rpx;
      color: #ffffff;
      margin: 0 10rpx;
      margin-top: 20rpx;
      background: #5590f6;
      &:nth-child(1) {
        margin-left: 0;
      }
      &:after {
        border: 0;
      }
    }
  }
  .my-popur {
    .title {
      padding: 20rpx;
      text-align: center;
      font-weight: bold;
    }
  }
}
</style>